<!-- 会员中心 -->
<template>
	<view class="content">
		<view class="toptitle">
			<view class="navbox">
				<uni-nav-bar height="149rpx" :border="false" backgroundColor="#61a0f0" color="#ffffff" right-icon="gear-filled" title="会员中心" @clickRight="she" />
			</view>
			<view class="avatarbox" @click="person" >
				<view class="avatar">
					
				</view>
				<view class="right">
					<view class="top">
						<text>13000000000</text>
					</view>
					<view class="bottom">
						<text class="iconfont icon-anquan">已认证</text>
						<!-- <uni-icons type="checkmarkempty" color="#fff" size="15"></uni-icons> -->
						
					</view>
				</view>
			</view>
		</view>
		<!-- 选项盒子 -->
		<view class="options">
			<view class="option" @click="fang" >
				<view class="top1">
					
				</view>
				<view class="bottom">
					<text>我的房屋</text>
				</view>
			</view>
			<view class="option" @click="vehicle" >
				<view class="top2">
				</view>
				<view class="bottom">
					<text>我的车辆</text>
				</view>
			</view>
			<view class="option" @click="fei" >
				<view class="top3">
				</view>
				<view class="bottom">
					<text>我的缴费</text>
				</view>
			</view>
			<view class="option" @click="jia" >
				<view class="top4">
				</view>
				<view class="bottom">
					<text>家庭成员</text>
				</view>
			</view>
		</view>
		<!-- 跳转盒子 -->
		<view class="jumpbox">
			<view class="jump" @click="baoxiu" >
				<view class="left">
					<text class="iconfont icon-jiatingweixiu"></text><text class="txt">报修记录</text>
				</view>
				<view class="right">
					<uni-icons type="right" color="#eee" size="20"></uni-icons>
				</view>
			</view>
			<view class="jump" @click="baoxiu" >
				<view class="left">
					<text class="iconfont icon-yijianfankui"></text><text class="txt">反馈记录</text>
				</view>
				<view class="right">
					<uni-icons type="right" color="#eee" size="20"></uni-icons>
				</view>
			</view>
			<view class="jump" @click="wuye" >
				<view class="left">
					<text class="iconfont icon-xinxi"></text><text class="txt">联系物业</text>
				</view>
				<view class="right">
					<uni-icons type="right" color="#eee" size="20"></uni-icons>
				</view>
			</view>
			<view class="jump" @click="person" >
				<view class="left">
					<text class="iconfont icon-shezhi"></text><text class="txt">账号设置</text>
				</view>
				<view class="right">
					<uni-icons type="right" color="#eee" size="20"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		methods:{
			she(){
				uni.navigateTo({
					url:'/pages/uniset/uniset'
				})
			},
			person(){
				uni.navigateTo({
					url:'/pages/Modification-of-Personal-Data/Modification-of-Personal-Data'
				})
			},
			fang(){
				uni.navigateTo({
					url:'/pages/meHouse/meHouse'
				})
			},
			vehicle(){
				uni.navigateTo({
					url:'/pages/mycar/mycar'
				})
			},
			fei(){
				uni.navigateTo({
					url:'/pages/PayTheFees/PayTheFees'
				})
			},
			jia(){
				uni.navigateTo({
					url:'/pages/familyMember/familyMember'
				})
			},
			baoxiu(){
				uni.navigateTo({
					url:'/pages/repairRecord/repairRecord'
				})
			},
			wuye(){
				uni.navigateTo({
					url:'/pages/assist/assist'
				})
			}
		}
	}
</script>

<style lang="less">
	page{
		background-color: #f6f6f6;
	}
	.content{
		.toptitle{
			width: 100%;
			height: 405rpx;
			background-image: url(https://s2.loli.net/2024/11/19/NBU27KVTx5MSsWY.jpg);
			background-size: cover;
			overflow: hidden;
			.navbox{
				width: 100%;
				height: 149rpx;
				margin-top: 55rpx;
			}
			.avatarbox{
				margin-left: 46rpx;
				height: 114rpx;
				display: flex;
				// 头像
				.avatar{
					width: 114rpx;
					height: 114rpx;
					border-radius: 50%;
					background-color: #fff;
					overflow: hidden;
					margin-right: 47rpx;
					background-image: url(https://s2.loli.net/2024/11/19/7QoqlDzMVxKeL9S.jpg);
					background-size: cover;
				}
				.right{
					width: 60%;
					height: 100%;
					color: #fff;
					.top{
						line-height: 64rpx;
						font-size: 25rpx;
					}
					.bottom{
						width: 140rpx;
						line-height: 40rpx;
						height: 40rpx;
						border-radius: 19rpx;
						border: 1rpx solid #fff;
						font-size: 24rpx;
					}
				}
			}
		}
		.options{
			width: 100%;
			height: 257rpx;
			background-color: #fff;
			display: flex;
			justify-content: space-around;
			margin-bottom: 20rpx;
			.option{
				width: 100rpx;
				height: 132rpx;
				margin-top: 79rpx;
				.top1{
					width: 60rpx;
					height: 60rpx;
					margin: 0 auto;
					background-image: url(https://s2.loli.net/2024/11/20/3ThqvZA85seu2ld.jpg);
					background-size: cover;
				}
				.top2{
					width: 60rpx;
					height: 60rpx;
					margin: 0 auto;
					background-image: url(https://s2.loli.net/2024/11/20/zKcdukDZCfiVPq8.jpg);
					background-size: cover;
				}
				.top3{
					width: 60rpx;
					height: 60rpx;
					margin: 0 auto;
					background-image: url(https://s2.loli.net/2024/11/20/bjeziRrL4CAQHD2.jpg);
					background-size: cover;
				}
				.top4{
					width: 60rpx;
					height: 60rpx;
					margin: 0 auto;
					background-image: url(https://s2.loli.net/2024/11/20/5V9uvl83OxNUcHz.jpg);
					background-size: cover;
				}
				.bottom{
					width: 100rpx;
					height: 72rpx;
					font-size: 23rpx;
					line-height: 72rpx;
					text-align: center;
					color: #1c4581;
				}
			}
		}
		// 跳转盒子
		.jumpbox{
			width: 100%;
			background-color: #fff;
			padding-top: 32rpx;
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			.jump{
				width: 95%;
				height: 88rpx;
				border-bottom: 2rpx solid #eee;
				display: flex;
				justify-content: space-between;
				line-height: 88rpx;
				.left{
					.txt{
						margin-left: 15rpx;
					}
				}
				.right{
					margin-right: 30rpx;
				}
			}
		}
	}
</style>